<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密钥管理</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <link rel="stylesheet" href="../viewstyle/css/publicform.css">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
</head>
<style type="text/css">
    .layui-form-label {
        padding: 9px 10px;
        width: 60px;
    }
    .layui-form-item{
        text-align: left;
    }
</style>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">使用状态</label>
                    <div class="layui-input-inline">
                        <select  lay-verify="required" id="zt" >
                            <option value="">选择状态</option>
                            <option value="未使用">未使用</option>
                            <option value="使用中">使用中</option>
                            <option value="已过期">已过期</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <lable class="layui-form-label">MAC地址</lable>
                    <div class="layui-input-inline">
                        <input type="text" id="mac" placeholder="mac地址"
                               class="layui-input"/>
                    </div>
                </div>


                <div class="layui-inline">
                    <lable class="layui-form-label">密钥</lable>
                    <div class="layui-input-inline">
                        <input type="text" id="miyao" placeholder="密钥"
                               class="layui-input"/>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="begin" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="end" placeholder="结束时间">
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btnsearch" class="layui-btn layuiadmin-btn-admin">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table class="layui-hide" id="station" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="delAndEdit">
    {{#if(d.terminal_key_status=='未使用'){  }}
    <input type="button" value="授权" class="layui-btn layui-btn-sm" lay-event="key"/>
    {{# }else{}}
    {{# }}}
</script>
<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var form = layui.form;
        var $ = layui.$;
        var table = layui.table;
        var laydate = layui.laydate;
        var data = layui.data("stationdata2");
        // 执行一个laydate实例
        laydate.render({
            elem: '#begin', //指定元素
            type: 'datetime'
        });
        table.render({
            elem: "#station",
            url: "/admin/terminal-key/findByStationIdQueryPassword?key_site=" + data.getdata.station_id,
            id: "t",
            toolbar: "#tol",
            cols: [[{
                title: "编号",
                field: "terminal_key_id",
                width: "10%",
                align: "center"
            }
                , {
                    title: "mac地址",
                    field: "terminal_mac",
                    width: "20%",
                    align: "center"
                }
                , {
                    title: "密钥",
                    field: "terminal_key_value",
                    width: "15%",
                    align: "center"
                }
                , {
                    title: "状态",
                    field: "terminal_key_status",
                    width: "10%",
                    align: "center"
                }
                , {
                    title: "开始时间",
                    field: "terminal_key_begin_time",
                    width: "17%",
                    align: "center"
                }
                , {
                    title: "结束时间",
                    field: "terminal_key_end_time",
                    width: "17%",
                    align: "center"
                },
                {
                    field: "terminal_key_id",
                    hide: true
                },
                {
                    field: "key_site",
                    hide: true
                }
                , {
                    title: "操作",
                    toolbar: "#delAndEdit",
                    width: "10%",
                    align: "center"
                }
            ]],
            page: true,
        });
        // 按钮的监听事件
        table.on("tool(t)", function (obj) {
            var getdata = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case "key":
                    layui.data('stationdata', {
                        key: 'getdata',
                        value: getdata
                    })
                    layer.open({
                        content:'zdmiyaoTermain.html',
                        type:2,
                        title:'选择终端',
                        area:['100%','100%']
                    });
                    break;
            }
        });
        //搜索的监听时间
        $('#btnsearch').click(function () {
            table.reload('t', {
                where: {
                    terminal_key_value: $("#miyao").val(),
                    terminal_key_begin_time: $("#begin").val(),
                    terminal_key_end_time: $("#end").val(),
                    terminal_mac: $("#mac").val(),
                    terminal_key_status:$("#zt").val()
                },
                page: {
                    curr: 1
                }
            })
        });

        $(window).keypress(function (event) {
            if(event.which === 13){
                $('#btnsearch').click();
            }
        })
    })
</script>
</html>
